<template>
  <div class="global-header" :class="{ 'scrolled': isScrolled }">
    <div class="header-left">
      <!-- Logo 和标题 -->
      <div class="logo-section">
        <img src="@/assets/logo.png" alt="Logo" class="logo" />
        <span class="site-title">快码AI</span>
      </div>

      <!-- 导航菜单 -->
      <a-menu
        v-model:selectedKeys="selectedKeys"
        mode="horizontal"
        class="header-menu"
        :items="menuItems"
        @click="handleMenuClick"
      />
    </div>

    <div v-if="loginUserStore.loginUser.id" class="user-section">
      <a-dropdown>
        <div class="user-info">
          <a-avatar :src="loginUserStore.loginUser.userAvatar" :size="36" class="user-avatar">
            {{ loginUserStore.loginUser.userName?.charAt(0) ?? 'U' }}
          </a-avatar>
          <span class="user-name">{{ loginUserStore.loginUser.userName ?? '未命名' }}</span>
        </div>
        <template #overlay>
          <a-menu class="user-dropdown-menu">
            <a-menu-item @click="goToUserCenter">
              <UserOutlined />
              个人中心
            </a-menu-item>
            <a-menu-item @click="doLogout">
              <LogoutOutlined />
              退出登录
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <div v-else class="login-section">
      <a-button @click="loginUserStore.openRegisterModal()" class="register-button">
        注册
      </a-button>
      <a-button type="primary" @click="loginUserStore.openLoginModal()" class="login-button">
        登录
      </a-button>
    </div>

    <!-- 登录弹出框 -->
    <a-modal
      v-model:open="loginUserStore.showLoginModal"
      :title="null"
      :footer="null"
      :width="400"
      :centered="true"
      :maskClosable="true"
      class="auth-modal login-modal"
    >
      <div class="auth-modal-content">
        <div class="auth-header">
          <div class="auth-logo">
            <img src="@/assets/logo.png" alt="快码AI" class="logo-img" />
          </div>
          <h1 class="auth-title">欢迎回来</h1>
          <p class="auth-subtitle">登录您的快码AI账户</p>
        </div>

        <a-form :model="loginFormState" name="loginForm" autocomplete="off" @finish="handleLoginSubmit" class="auth-form">
          <a-form-item name="userAccount" :rules="[{ required: true, message: '请输入账号' }]">
            <a-input
              v-model:value="loginFormState.userAccount"
              placeholder="账号"
              size="large"
              class="auth-input"
            />
          </a-form-item>
          <a-form-item
            name="userPassword"
            :rules="[
              { required: true, message: '请输入密码' },
              { min: 6, message: '密码不能小于 6 位' },
            ]"
          >
            <a-input-password
              v-model:value="loginFormState.userPassword"
              placeholder="密码"
              size="large"
              class="auth-input"
            />
          </a-form-item>
          <a-form-item 
            name="captchaCode" 
            :rules="[{ required: true, message: '请输入验证码' }]"
          >
            <CaptchaInput 
              v-model="loginFormState.captchaCode"
              @update:captchaKey="handleLoginCaptchaKeyUpdate"
              @pressEnter="handleLoginSubmit"
            />
          </a-form-item>

          <a-form-item class="auth-submit-item">
            <a-button
              type="primary"
              html-type="submit"
              size="large"
              :loading="loginLoading"
              class="auth-submit-button"
              block
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>

        <div class="auth-footer">
          <span class="auth-footer-text">还没有账号？</span>
          <a @click="switchToRegister" class="auth-link">注册</a>
        </div>
      </div>
    </a-modal>

    <!-- 注册弹出框 -->
    <a-modal
      v-model:open="loginUserStore.showRegisterModal"
      :title="null"
      :footer="null"
      :width="400"
      :centered="true"
      :maskClosable="true"
      class="auth-modal register-modal"
    >
      <div class="auth-modal-content">
        <div class="auth-header">
          <div class="auth-logo">
            <img src="@/assets/logo.png" alt="快码AI" class="logo-img" />
          </div>
          <h1 class="auth-title">加入快码AI</h1>
          <p class="auth-subtitle">创建您的账户，开始AI编程之旅</p>
        </div>

        <a-form :model="registerFormState" name="registerForm" autocomplete="off" @finish="handleRegisterSubmit" class="auth-form">
          <a-form-item name="userAccount" :rules="[{ required: true, message: '请输入账号' }]">
            <a-input
              v-model:value="registerFormState.userAccount"
              placeholder="账号"
              size="large"
              class="auth-input"
            />
          </a-form-item>
          <a-form-item
            name="userPassword"
            :rules="[
              { required: true, message: '请输入密码' },
              { min: 6, message: '密码不能小于 6 位' },
            ]"
          >
            <a-input-password
              v-model:value="registerFormState.userPassword"
              placeholder="密码"
              size="large"
              class="auth-input"
            />
          </a-form-item>
          <a-form-item
            name="checkPassword"
            :rules="[
              { required: true, message: '请确认密码' },
              { min: 6, message: '密码不能小于 6 位' },
              { validator: validateCheckPassword },
            ]"
          >
            <a-input-password
              v-model:value="registerFormState.checkPassword"
              placeholder="确认密码"
              size="large"
              class="auth-input"
            />
          </a-form-item>
          <a-form-item 
            name="captchaCode" 
            :rules="[{ required: true, message: '请输入验证码' }]"
          >
            <CaptchaInput 
              v-model="registerFormState.captchaCode"
              @update:captchaKey="handleRegisterCaptchaKeyUpdate"
              @pressEnter="handleRegisterSubmit"
            />
          </a-form-item>

          <a-form-item class="auth-submit-item">
            <a-button
              type="primary"
              html-type="submit"
              size="large"
              :loading="registerLoading"
              class="auth-submit-button register-button-style"
              block
            >
              创建账户
            </a-button>
          </a-form-item>
        </a-form>

        <div class="auth-footer">
          <span class="auth-footer-text">已有账号？</span>
          <a @click="switchToLogin" class="auth-link">登录</a>
        </div>
      </div>
    </a-modal>


  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Menu, Button, message, type MenuProps } from 'ant-design-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import { userLogin, userRegister } from '@/api/userController.ts'
import CaptchaInput from '@/components/CaptchaInput.vue'

const router = useRouter()
const route = useRoute()

// 选中的菜单项
const selectedKeys = ref<string[]>(['home'])

// 滚动状态
const isScrolled = ref(false)

// 登录弹出框状态
const loginLoading = ref(false)
const loginFormState = reactive<API.UserLoginRequest>({
  userAccount: '',
  userPassword: '',
  captchaKey: '',
  captchaCode: '',
})

// 注册弹出框状态
const registerLoading = ref(false)
const registerFormState = reactive<API.UserRegisterRequest>({
  userAccount: '',
  userPassword: '',
  checkPassword: '',
  captchaKey: '',
  captchaCode: '',
})

// 根据当前路由路径设置选中的菜单项
const setSelectedKeysByRoute = () => {
  const path = route.path
  if (path === '/') {
    selectedKeys.value = ['home']
  } else if (path.includes('/docs')) {
    selectedKeys.value = ['docs']
  } else if (path.includes('/admin/userManage')) {
    selectedKeys.value = ['admin/userManage']
  } else if (path.includes('/admin/appManage')) {
    selectedKeys.value = ['admin/appManage']
  } else if (path.includes('/admin/chatHistoryManage')) {
    selectedKeys.value = ['admin/chatHistoryManage']
  } else {
    // 其他路径可以根据需要添加
    const matchedKey = originItems.find(item => path.includes(`/${item.key}`))?.key
    if (matchedKey) {
      selectedKeys.value = [matchedKey]
    }
  }
}

// 菜单配置
const originItems = reactive([
  {
    key: 'home',
    label: '首页',
    title: '首页'
  },
  {
    key: 'docs',
    label: '使用文档',
    title: '使用文档'
  },
  {
    key: 'admin/userManage',
    label: '用户管理',
    title: '用户管理'
  },
  {
    key: 'admin/appManage',
    label: '应用管理',
    title: '应用管理'
  },
  {
    key: 'admin/chatHistoryManage',
    label: '对话管理',
    title: '对话管理'
  }
])

// 过滤菜单项
const filterMenus = (menus = [] as MenuProps['items']) => {
  return menus?.filter((menu) => {
    const menuKey = menu?.key as string

    // 检查菜单项对应的路由或者菜单key是否与admin相关
    if (menuKey === 'userManage' || menuKey.includes('admin')) {
      const loginUser = loginUserStore.loginUser
      if (!loginUser || loginUser.userRole !== 'admin') {
        return false
      }
    }

    return true
  })
}

// 展示在菜单的路由数组
const menuItems = computed<MenuProps['items']>(() => filterMenus(originItems))

const loginUserStore = useLoginUserStore()

// 处理菜单点击
const handleMenuClick = ({ key }: { key: string }) => {
  selectedKeys.value = [key]

  // 根据菜单项跳转路由
  switch (key) {
    case 'home':
      router.push('/')
      break
    case 'docs':
      router.push('/docs')
      break
    case 'admin/userManage':
      // 检查用户权限
      if (loginUserStore.loginUser.userRole === 'admin') {
        router.push('/admin/userManage')
      } else {
        message.error('您没有权限访问该页面')
        router.push('/')
      }
      break
    case 'admin/appManage':
      // 检查用户权限
      if (loginUserStore.loginUser.userRole === 'admin') {
        router.push('/admin/appManage')
      } else {
        message.error('您没有权限访问该页面')
        router.push('/')
      }
      break
    case 'admin/chatHistoryManage':
      // 检查用户权限
      if (loginUserStore.loginUser.userRole === 'admin') {
        router.push('/admin/chatHistoryManage')
      } else {
        message.error('您没有权限访问该页面')
        router.push('/')
      }
      break
    default:
      // 处理其他可能的admin路由
      if (key.includes('admin')) {
        if (loginUserStore.loginUser.userRole === 'admin') {
          router.push(`/${key}`)
        } else {
          message.error('您没有权限访问该页面')
          router.push('/')
        }
      } else {
        router.push(`/${key}`)
      }
  }
}
import { LogoutOutlined, UserOutlined } from '@ant-design/icons-vue'
import { userLogout } from '@/api/userController.ts'

// 监听路由变化，更新选中的菜单项
watch(() => route.path, () => {
  setSelectedKeysByRoute()
}, { immediate: true })

// 滚动监听函数
const handleScroll = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  isScrolled.value = scrollTop > 10  // 降低触发阈值，让效果更容易看到
}

// 页面加载时设置选中的菜单项
onMounted(() => {
  setSelectedKeysByRoute()
  // 添加滚动监听
  window.addEventListener('scroll', handleScroll, { passive: true })
})

// 页面卸载时移除监听器
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

// 跳转到个人中心
const goToUserCenter = () => {
  router.push('/user/center')
}

// 用户注销
const doLogout = async () => {
  const res = await userLogout()
  if (res.data.code === 0) {
    loginUserStore.setLoginUser({
      userName: '未登录',
    })
    message.success('退出登录成功')
    await router.push('/')
  } else {
    message.error('退出登录失败，' + res.data.message)
  }
}

// 处理登录验证码key更新
const handleLoginCaptchaKeyUpdate = (key: string) => {
  loginFormState.captchaKey = key
}

// 处理注册验证码key更新
const handleRegisterCaptchaKeyUpdate = (key: string) => {
  registerFormState.captchaKey = key
}

// 处理登录提交
const handleLoginSubmit = async (values: any) => {
  loginLoading.value = true
  try {
    // 使用完整的loginFormState，确保包含captchaKey
    const submitData = {
      userAccount: loginFormState.userAccount,
      userPassword: loginFormState.userPassword,
      captchaKey: loginFormState.captchaKey,
      captchaCode: loginFormState.captchaCode,
    }
    const res = await userLogin(submitData)
    // 登录成功，把登录态保存到全局状态中
    if (res.data.code === 0 && res.data.data) {
      await loginUserStore.fetchLoginUser()
      message.success('登录成功')
      loginUserStore.closeLoginModal()
      // 重置表单
      loginFormState.userAccount = ''
      loginFormState.userPassword = ''
      loginFormState.captchaKey = ''
      loginFormState.captchaCode = ''
      // 登录成功后留在当前页面，不需要跳转
    } else {
      message.error('登录失败，' + res.data.message)
    }
  } catch (error) {
    console.error('登录错误:', error)
    message.error('登录失败，请重试')
  } finally {
    loginLoading.value = false
  }
}

// 切换到注册弹出框
const switchToRegister = () => {
  loginUserStore.openRegisterModal()
}

// 切换到登录弹出框
const switchToLogin = () => {
  loginUserStore.openLoginModal()
}

// 验证确认密码
const validateCheckPassword = (rule: unknown, value: string, callback: (error?: Error) => void) => {
  if (value && value !== registerFormState.userPassword) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

// 处理注册提交
const handleRegisterSubmit = async (values: API.UserRegisterRequest) => {
  registerLoading.value = true
  try {
    // 使用完整的registerFormState，确保包含captchaKey
    const submitData = {
      userAccount: registerFormState.userAccount,
      userPassword: registerFormState.userPassword,
      checkPassword: registerFormState.checkPassword,
      captchaKey: registerFormState.captchaKey,
      captchaCode: registerFormState.captchaCode,
    }
    const res = await userRegister(submitData)
    // 注册成功，自动切换到登录框
    if (res.data.code === 0) {
      message.success('注册成功，请登录')
      // 重置表单
      registerFormState.userAccount = ''
      registerFormState.userPassword = ''
      registerFormState.checkPassword = ''
      registerFormState.captchaKey = ''
      registerFormState.captchaCode = ''
      // 切换到登录框并预填账号
      loginFormState.userAccount = submitData.userAccount
      loginUserStore.openLoginModal()
    } else {
      message.error('注册失败，' + res.data.message)
    }
  } catch (error) {
    console.error('注册错误:', error)
    message.error('注册失败，请重试')
  } finally {
    registerLoading.value = false
  }
}


</script>

<style scoped>
.global-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 32px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid #f0f0f0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 滚动时的毛玻璃效果 */
.global-header.scrolled {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(240, 240, 240, 0.3);
  transform: translateZ(0);
}

.header-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.logo-section {
  display: flex;
  align-items: center;
  margin-right: 48px;
  padding: 8px 0;
}

.logo {
  height: 36px;
  width: 36px;
  margin-right: 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.site-title {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  letter-spacing: -0.5px;
  transition: all 0.3s ease;
}

/* 滚动时logo和标题的增强效果 */
.global-header.scrolled .logo {
  filter: drop-shadow(0 2px 4px rgba(24, 144, 255, 0.2));
  transform: scale(0.95);
}

.global-header.scrolled .site-title {
  text-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
  transform: scale(0.95);
}

.header-menu {
  flex: 1;
  border-bottom: none;
  line-height: 64px;
  background: transparent;
  transition: all 0.3s ease;
}

/* 滚动时菜单的增强效果 */
.global-header.scrolled .header-menu {
  backdrop-filter: blur(8px);
}

.global-header.scrolled .header-menu :deep(.ant-menu-item) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 用户区域样式 */
.user-section {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(24, 144, 255, 0.04);
  border: 1px solid rgba(24, 144, 255, 0.08);
}

.user-info:hover {
  background: rgba(24, 144, 255, 0.08);
  border-color: rgba(24, 144, 255, 0.15);
  transform: translateY(-1px);
}

/* 滚动时用户区域的增强效果 */
.global-header.scrolled .user-info {
  background: rgba(24, 144, 255, 0.08);
  border-color: rgba(24, 144, 255, 0.12);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

.global-header.scrolled .register-button {
  box-shadow: 0 2px 12px rgba(24, 144, 255, 0.2);
  transform: translateY(-1px);
}

.global-header.scrolled .login-button {
  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.25);
  transform: translateY(-1px);
}

.user-avatar {
  border: 2px solid rgba(24, 144, 255, 0.1);
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 登录注册按钮样式 */
.login-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.register-button {
  height: 36px;
  padding: 0 20px;
  border-radius: 18px;
  font-weight: 500;
  background: transparent;
  border: 1px solid #1890ff;
  color: #1890ff;
  transition: all 0.3s ease;
}

.register-button:hover {
  background: #1890ff;
  color: #ffffff;
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
  transform: translateY(-1px);
}

.login-button {
  height: 36px;
  padding: 0 20px;
  border-radius: 18px;
  font-weight: 500;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
  transition: all 0.3s ease;
}

.login-button:hover {
  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
  transform: translateY(-2px);
}

/* 用户下拉菜单样式 */
:deep(.user-dropdown-menu) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
}

:deep(.user-dropdown-menu .ant-menu-item) {
  border-radius: 6px;
  margin: 4px 8px;
  transition: all 0.2s ease;
}

:deep(.user-dropdown-menu .ant-menu-item:hover) {
  background: rgba(24, 144, 255, 0.08);
}

.header-right {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .global-header {
    padding: 0 16px;
  }

  .logo-section {
    margin-right: 20px;
  }

  .site-title {
    font-size: 16px;
  }

  .header-menu {
    display: none;
  }
}

@media (max-width: 480px) {
  .site-title {
    display: none;
  }

  .logo-section {
    margin-right: 0;
  }
}

/* 认证弹出框统一样式 */
:deep(.auth-modal) {
  .ant-modal-content {
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: #ffffff;
  }

  .ant-modal-body {
    padding: 0;
  }

  .ant-modal-mask {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
  }

  .ant-modal-close {
    top: 16px;
    right: 16px;
  }

  .ant-modal-close-x {
    width: 32px;
    height: 32px;
    line-height: 32px;
    color: #8c8c8c;
    font-size: 16px;
  }
}

.auth-modal-content {
  padding: 40px 36px 36px;
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-logo {
  margin-bottom: 20px;
}

.logo-img {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.12);
}

.auth-title {
  font-size: 26px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.auth-subtitle {
  font-size: 15px;
  color: #666666;
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}

.auth-form {
  margin-bottom: 24px;
}

:deep(.auth-form .ant-form-item) {
  margin-bottom: 18px;
}

:deep(.auth-form .ant-form-item:last-child) {
  margin-bottom: 0;
}

:deep(.auth-form .ant-form-item-explain-error) {
  font-size: 13px;
  color: #ff4d4f;
  margin-top: 6px;
  line-height: 1.4;
}

.auth-input {
  height: 46px !important;
  border-radius: 10px !important;
  border: 1px solid #e0e0e0 !important;
  font-size: 15px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #fafafa !important;
}

:deep(.auth-input) {
  padding: 12px 16px !important;
}

:deep(.auth-input:hover) {
  border-color: #1890ff !important;
  background: #ffffff !important;
}

:deep(.auth-input:focus) {
  border-color: #1890ff !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1) !important;
}

:deep(.auth-input.ant-input-affix-wrapper-focused) {
  border-color: #1890ff !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1) !important;
}

:deep(.auth-input.ant-input-affix-wrapper-status-error) {
  border-color: #ff4d4f !important;
  background: #fff2f0 !important;
}

:deep(.auth-input.ant-input-affix-wrapper-status-error:focus) {
  border-color: #ff4d4f !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1) !important;
}

:deep(.auth-input .ant-input) {
  border: none !important;
  background: transparent !important;
  font-size: 15px !important;
  padding: 0 !important;
  color: #262626 !important;
}

:deep(.auth-input .ant-input::placeholder) {
  color: #bfbfbf !important;
  font-size: 15px !important;
}

.auth-submit-item {
  margin-top: 28px !important;
}

.auth-submit-button {
  height: 46px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border: none !important;
  background: #1890ff !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15) !important;
}

:deep(.auth-submit-button:hover) {
  background: #40a9ff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.25) !important;
}

:deep(.auth-submit-button:active) {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2) !important;
}

.register-button-style {
  background: #1890ff !important;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15) !important;
}

:deep(.register-button-style:hover) {
  background: #40a9ff !important;
  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.25) !important;
}

:deep(.register-button-style:active) {
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2) !important;
}

.auth-footer {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #f5f5f5;
  margin-top: 8px;
}

.auth-footer-text {
  font-size: 14px;
  color: #8c8c8c;
  margin-right: 6px;
}

.auth-link {
  color: #1890ff;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-link:hover {
  color: #40a9ff;
}

/* 弹出框中验证码组件的特殊样式 */
:deep(.auth-modal .captcha-container) {
  width: 100%;
}

:deep(.auth-modal .captcha-input-group) {
  gap: 8px;
}

:deep(.auth-modal .captcha-image-wrapper) {
  width: 100px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.auth-modal .captcha-image-wrapper:hover) {
  border-color: #1890ff;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
}

:deep(.auth-modal .captcha-help) {
  margin-top: 6px;
}

:deep(.auth-modal .help-text) {
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.4;
}

/* 移动端适配 */
@media (max-width: 480px) {
  :deep(.auth-modal .captcha-input-group) {
    flex-direction: column;
    gap: 12px;
  }
  
  :deep(.auth-modal .captcha-image-wrapper) {
    width: 100%;
    height: 45px;
  }
}

</style>
